<template>
  <div id="app">
    <router-view />
    <span class="display iconfont icon-gaibian" @click="displayCash"></span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      display: true,
      typeList: [
        "chitose",
        "haruto",
        "hibiki",
        "hijiki",
        "izumi",
        "koharu",
        "miku",
        "ni-j",
        "nico",
        "nietzsche",
        "nipsilon",
        "nito",
        "shizuku",
        "tsumiki",
        "unitychan",
        "wanko",
        "z16",
      ],
      type: "haruto",
    };
  },
  components: {
    //
  },

  created() {
    this.displayCash();
  },
  mounted() {
    this.loadCash();
  },
  methods: {
    displayCash() {
      const randIndex = Math.floor(Math.random() * this.typeList.length);
      this.type = this.typeList[randIndex];
      console.log(this.type);
      window.L2Dwidget.config.model = {
        jsonPath: `../live2dw/live2d-widget-model-${this.type}/assets/${this.type}.model.json`,
      };
      window.L2Dwidget.config.pluginModelPath = `live2d-widget-model-${this.type}/assets/`;
      this.loadCash();
    },
    async loadCash() {
      setTimeout(() => {
        window.L2Dwidget.init({
          pluginRootPath: "live2dw/",
          pluginJsPath: "lib/",
          pluginModelPath: `live2d-widget-model-haruto/assets/`,
          tagMode: false,
          debug: false,
          model: {
            jsonPath: `../live2dw/live2d-widget-model-haruto/assets/haruto.model.json`,
          },
          display: { position: "left", width: 200, height: 350 },
          mobile: { show: true },
          log: false,
        });
      }, 300);
    },
  },
};
</script>

<style>
#app {
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.display {
  position: absolute;
  left: 1%;
  bottom: 22%;
  font-size: 20px;
  color: white;
}
</style>
